<template>
  <div class="retrieve" v-loading.fullscreen.lock="fullscreenLoading">
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>
    <div>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        autocomplete="off"
      >
        <div v-if="active == 0" class="Rtitle">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <div class="b">
              <el-input
                v-model="ruleForm.code"
                maxlength="6"
                placeholder="请输入验证码"
              />
              <el-button size="mini" round @click="sendMsg" class="status">{{
                statusMsg
              }}</el-button>
            </div>
          </el-form-item>
        </div>

        <div v-if="active == 1" class="Rtitle">
          <el-form-item label="密码" prop="pwd">
            <el-input
              v-model="ruleForm.pwd"
              type="password"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item label="确认密码" prop="cpwd">
            <el-input
              v-model="ruleForm.cpwd"
              type="password"
              placeholder="请确认密码"
            />
          </el-form-item>
        </div>
        <div v-if="active == 2" class="Rtitle">
          <el-button type="success" round @click="login">重新登录</el-button>
        </div>
        <el-button
          style="margin-top: 12px"
          @click="anext"
          v-if="this.active < 2"
          >下一步</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      step: 2,
      statusMsg: "发送验证码",
      error: "",
      fullscreenLoading: false,
      msgcode: "",
      ruleForm: {
        email: "",
        pwd: "",
        cpwd: "",
        code: "",
        id: "",
      },
      rules: {
        email: [
          {
            required: true,
            type: "email",
            message: "请输入邮箱",
            trigger: "blur",
          },
        ],
        pwd: [
          {
            required: true,
            message: "创建密码",
            trigger: "blur",
          },
        ],
        cpwd: [
          {
            required: true,
            message: "确认密码",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请再次输入密码"));
              } else if (value !== this.ruleForm.pwd) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  layout: "blank",
  methods: {
    login() {
      this.$router.push({ path: "/login" });
    },
    anext() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.ruleForm.code == this.msgcode) {
            this.fullscreenLoading = true;
            setTimeout(() => {
              this.fullscreenLoading = false;
              if (this.active < 2) this.active++;
            }, 1000);
          } else {
            this.$message("验证码错误或已过期!");
          }
          if (this.ruleForm.pwd != "") {
            let url = "stroll/repwd";
            let data = `pwd=${this.ruleForm.pwd}&email=${this.ruleForm.email}`;
            this.axios.put(url, data).then((res) => {
              if (this.ruleForm.pwd == this.ruleForm.cpwd) {
                this.$message(res.data.msg);
                this.fullscreenLoading = true;
                setTimeout(() => {
                  this.fullscreenLoading = false;
                  if (this.active < 2) this.active++;
                }, 1000);
              }
            });
          }
        }
      });
    },
    sendMsg() {
      const self = this;
      let emailPass;
      if (self.timerid) {
        return false;
      }
      this.$refs["ruleForm"].validateField("email", (valid) => {
        emailPass = valid;
      });
      // 模拟验证码发送
      if (!emailPass) {
        let count = 60;
        self.timerid = setInterval(function () {
          self.statusMsg = `${--count}秒`;
          if (count === 0) {
            self.statusMsg = "重新发送";
            clearInterval(self.timerid);
            self.timerid = false;
          }
        }, 1000);
      }
      let url = `stroll/email?email=${this.ruleForm.email}`;
      this.axios.get(url).then((res) => {
        this.msgcode = res.data.code;
        setTimeout(() => {
          this.msgcode = "";
        }, 1000 * 60);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Rtitle .el-form-item label {
  color: black !important;
}
.Rtitle {
  text-align: center;
  margin-top: 60px;
}
.b {
  display: flex;
}
.retrieve {
  margin: 100px auto;
  width: 500px;
  height: 400px;
}
</style>
